import { Meta, Story, ArgsTable, Canvas, Source } from '@storybook/addon-docs'
import { ButtonGroup } from '@v-uik/button-group'
import { Button } from '@v-uik/button'
import {
  createTitle,
  COMPONENTS,
  DocsAlert,
  createStory,
} from '../../docs/showroom/config'
import {
  Single,
  Multi,
  Examples,
  PopupExample,
  ClassesDummy,
  Canvas as CanvasStory,
  CloneElement,
} from '@v-uik/button-group/examples'
import RawSingle from '!!raw-loader!@v-uik/button-group/examples/Single'
import RawMulti from '!!raw-loader!@v-uik/button-group/examples/Multi'
import RawExamples from '!!raw-loader!@v-uik/button-group/examples/Examples'
import RawPopupExample from '!!raw-loader!@v-uik/button-group/examples/PopupExample'
import RawCanvas from '!!raw-loader!@v-uik/button-group/examples/Canvas'
import RawCloneElement from '!!raw-loader!@v-uik/button-group/examples/CloneElement'

export const story = createStory(CanvasStory, RawCanvas)

<Meta
  title={createTitle([COMPONENTS.controls, 'ButtonGroup', 'ButtonGroup'])}
  component={ButtonGroup}
/>

<Story
  name="ButtonGroup"
  parameters={{
    ...story.parameters,
    controls: {
      disable: true,
    },
    docs: {
      disable: true,
    },
  }}
>
  {story.component}
</Story>

# ButtonGroup

Отображает группу связанных кнопок.

## import

```ts
import { ButtonGroup, Button } from '@v-uik/base'
```

или

```ts
import { ButtonGroup } from '@v-uik/button-group'
import { Button } from '@v-uik/button'
```

<DocsAlert type="warning">
  Компонент использует <code>React.CloneElement</code>. Перейдите к разделу{' '}
  <a href="#механизм-reactcloneelement">Механизм React.CloneElement</a> чтобы
  узнать подробнее
</DocsAlert>

## Размеры и цветовая схема

<Canvas withSource="none">
  <Examples />
</Canvas>

<Source language="tsx" code={RawExamples} />

## Единичный выбор

Единичный выбор предполагает выбор одного значения из возможных.

<Canvas withSource="none">
  <Single />
</Canvas>

<Source language="tsx" code={RawSingle} />

## Множественный выбор

Множественный выбор предполагает выбор нескольких значений из возможных.

<Canvas withSource="none">
  <Multi />
</Canvas>

<Source language="tsx" code={RawMulti} />

## Отображение PopUp внутри ButtonGroup

<DocsAlert type="warning">
  Компонент <b>ButtonGroup</b> рекомендуется использовать только для одной цели
  — отображение кнопок в ряд и получения состояния <b>selected</b>.
  Компонент&nbsp;
  <b>ButtonGroup</b> позволяет использовать внутри себя только компонент&nbsp;
  <b>Button</b>, не обернутый в какой-либо тег или компонент.
</DocsAlert>

<Canvas withSource="none">
  <PopupExample />
</Canvas>

<Source language="tsx" code={RawPopupExample} />

## Механизм `React.CloneElement`

Компонент `ButtonGroup` использует механизм `React.CloneElement` для всех передаваемых `children` и ожидает в качестве `children` компоненты `Button`.
Для них он задает следующие свойства:

| Свойство    | Описание                                                                                                                                                                 |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `kind`      | Тип кнопки. Значение всегда равно `outlined`                                                                                                                             |
| `color`     | Цвет кнопки. Значение равно передаваемому значению из `ButtonGroup`                                                                                                      |
| `disabled`  | Флаг заблокированной кнопки. Равно значению передаваемому значению из `ButtonGroup` или значению `disabled`, если оно указано у соответствующего `child`                 |
| `className` | Css-класс, который состоит из `className` у соответствующего `child`, а также `className`, который присваивает `ButtonGroup`                                             |
| `classes`   | Объект, который содержит `classes1` (значение `classes` из `child`), `classes2` (значение `classes` из `ButtonGroup`), `mergeCallback` (функция для объединения классов) |
| `onClick`   | Функция обратного вызова, которая обрабатывает нажатие на кнопку и вызывает обработчики `ButtonGroup`                                                                    |

`ButtonGroup` накладывает ограничения на использование компонентов в `children`, так как он выполняет проверку на валидность `children` и ожидает, что в конечном счете это будут компоненты `Button`

Ниже представлен пример как передать в качестве `children` пользовательскую обертку над компонентом `Button`

<Canvas withSource="none">
  <CloneElement />
</Canvas>

<Source language="tsx" code={RawCloneElement} />

## Связанные компоненты

- [Button](?path=/docs/элементы-управления-button-button--button)
